<h4>Image with caption [Left Aligned]:</h4>
<p>
<figure custom-figure-attribute>
    <img src="https://httpbin.org/image/jpeg" alt="Coyote" class="alignleft"/>
    <figcaption custom-figcaption-attribute>I'm a very, very, very long figcaption, written in a galaxy far, far, far away. Moo to you!</figcaption>
</figure>
</p>

<hr>

<h4>Image with caption [Right Aligned]:</h4>
<p>
<figure custom-figure-attribute>
    <img src="https://httpbin.org/image/jpeg" alt="Coyote" class="alignright"/>
    <figcaption custom-figcaption-attribute>This is a uper long figcaption string, that should be right aligned!</figcaption>
</figure>
</p>

<hr>

<h4>Image with caption [Centered!]:</h4>
<p>
<figure custom-figure-attribute>
    <img src="https://httpbin.org/image/jpeg" alt="Coyote" />
    <figcaption custom-figcaption-attribute>Very very very very long figcaption snippet, left aligned, for our visual awesome test!</figcaption>
</figure>
</p>

<hr>

<h4>Image with caption [Left Aligned]:</h4>
<p>
<figure custom-figure-attribute>
    <img src="https://httpbin.org/image/jpeg" alt="Coyote" class="alignleft"/>
    <figcaption custom-figcaption-attribute>Caption!</figcaption>
</figure>
</p>

<hr>

<h4>Image with caption [Right Aligned]:</h4>
<p>
<figure custom-figure-attribute>
    <img src="https://httpbin.org/image/jpeg" alt="Coyote" class="alignright"/>
    <figcaption custom-figcaption-attribute>Caption!</figcaption>
</figure>
</p>

<hr>

<h4>Image with caption [Centered!]:</h4>
<p>
<figure custom-figure-attribute>
    <img src="https://httpbin.org/image/jpeg" alt="Coyote" />
    <figcaption custom-figcaption-attribute>Caption!</figcaption>
</figure>
</p>

<hr>

